<template>
	<!-- 帮助中心 -->
	<view class="help">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="帮助中心"></tab-top>
		<!-- #endif -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in swiperItem" :key="index" :id="index"
				@tap="tabSelect(index)" :class="index === TabCur ? 'nav_item_action': '' ">
				<text>{{item}}</text>
			</view>
		</view>
		<swiper class="swiper uni-clearfix" :current="TabCur"
		 duration="300" @change="changeTabCur($event)" >
			<!-- 常见问题 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll_view">
					<view class="box">
						<view class="item" v-for="(item,index) in question " :key='index'>
							<view class="item_title" @tap="unfoldItem(index,true)">
								<view>
									<text class="item_icon">Q</text>
									<text class="item_text">{{item.article_main_title}}</text>
								</view>
								<view>
									<image v-show="itemActive1 !== index" class="item_img1" 
									src="/static/icon/arrows-r.png"/>
									<image v-show="itemActive1 === index" class="item_img2"
									src="/static/icon/arrows.png"/>
								</view>
							</view>
							<view class="item_content" v-show="itemActive1 === index" >
								<view v-html="item.article_content"></view>
							</view>
						</view>
					</view>			
				</scroll-view>	
			</swiper-item>
		
			<!-- 操作流程 -->
			<swiper-item>
				<scroll-view scroll-y class="scroll_view">
					<view class="box">
						<view class="item" v-for="(item,index) in help" :key='index'>
							<view class="item_title" @tap="unfoldItem(index,false)">
								<view>
									<text class="item_icon">P</text>
									<text class="item_text">{{item.article_main_title}}</text>
								</view>
								<view>
									<image v-show="itemActive2 !== index" 
									class="item_img1" 
									src="/static/icon/arrows-r.png"/>
									<image v-show="itemActive2 == index" class="item_img2"
									src="/static/icon/arrows.png"/>
								</view>
							</view>
							<view class="item_content" v-show="itemActive2 === index" >
								<view v-html="item.article_content"></view>
							</view>
						</view>
					</view>			
				</scroll-view>	
			</swiper-item>			
		</swiper>	
	</view>
</template>

<script>
export default {
	name:"help",
	data() {
		return {
			swiperItem:['常见问题','操作流程'],
			itemActive1: NaN,
			itemActive2: NaN,
			TabCur: 0,
			question:[],
			help:[]
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		// 点击tab导航切换swiper
		tabSelect(e) {
			this.TabCur = e
		},
		// 滑动swiper切换tab
		changeTabCur(e){
			this.TabCur = e.detail.current
		},
		// 点击收缩打开详情
		unfoldItem(e,i){
			if(i){
				if(this.itemActive1 !== e){
					this.itemActive1 = e;
					return;
				}
				this.itemActive1 = NaN;
				return;
			}else{
				if(this.itemActive2 !== e){
					this.itemActive2 = e;
					return;
				}
				this.itemActive2 = NaN;
			}
		},
		getData(){
			/*
			* 获取帮助信息
			*/
			this.req({
				url:'both/article',
				method:'get',
				data:{
					ac_id:'problem',
					article_position:this.isLogin().type,
					page:1,
					limit:30
				}
			},
			(res)=>{
				if(res.data.status == 1) {
					console.log(res); 
					this.question = res.data.data.data;
				}else{
					uni.showToast({
						title:'没有更多信息了',
						icon:'none'
					});
				}
			},
			(res)=>{
				
			});
			/*
			* 获取操作流程
			*/
			this.req({
				url:'both/article',
				method:'get',
				data:{
					ac_id:'help',
					article_position:this.isLogin().type,
					page:1,
					limit:30
				}
			},
			(res)=>{
				if(res.data.status == 1) {
					console.log(res); 
					this.help = res.data.data.data;
				}else{
					uni.showToast({
						title:'没有更多信息了',
						icon:'none'
					})
				}
			},
			(res)=>{
				
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.help {
	font-family: PingFang-SC-Medium;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0upx;
	color: #333333;
	.nav {
		height: 72upx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		font-size: 32upx;
		line-height: 32upx;
		.nav_item {
			box-sizing: border-box;
			height: 44upx;
		}
		.nav_item_action {
			border-bottom: 4upx solid #3595f9;
		}
	}
	.swiper{
		width: 100%;
		height: calc(100vh - 112upx);
		.scroll_view{
			height: calc(100vh - 112upx);
			.box{
				width: 702upx;
				padding: 0 24upx;
				.item{
					border-bottom: 1upx solid #e5e5e5;
					.item_title{
						display: flex;
						height: 96upx;
						align-items: center;
						justify-content: space-between;
						.item_icon{
							display: inline-block;
							width: 38upx;
							height: 38upx;
							background-color: #3595f9;
							border-radius: 8upx;
							font-size: 24upx;
							color: #ffffff;
							text-align: center;
							line-height: 38upx;
							margin-right: 20upx;
						}
						.item_text{
							font-size: 32upx;
						}
						.item_img1{
							width: 12upx;
							height: 20upx;
						}
						.item_img2{
							width: 20upx;
							height: 12upx;
						}
					}
					.item_content{
						padding: 0 0 30upx 60upx;
						font-size: 28upx;
						line-height: 42upx;
						color: #999999;
					}
				}
			}
		}	
	}
}
</style>
